<template>
  <default-layout>
    <header-back text="确定报名信息" slot="header"></header-back>
    <div slot="main">
      <div class="form-list">
        <div class="form-list-item">
          <span class="label">姓名：</span>
          <span class="content">{{user.personName}}</span>
        </div>
        <div class="form-list-item">
          <span class="label">档案号：</span>
          <span class="content">{{user.archiveCode}}</span>
        </div>
        <div class="form-list-item">
          <span class="label">党员编号：</span>
          <span class="content">{{user.personCard}}</span>
        </div>
      </div>
      <div class="form">
        <yd-cell-group>
          <yd-cell-item>
            <span slot="left" class="label required">联系电话：</span>
            <xf-input
              slot="right"
              :valid="[{required: true, msg: '请填写手机号'}, {reg: $regex.phone, msg: '手机号格式不正确'}]"
              v-model="form.telphone"
              ref="telphone"
              placeholder="请填写手机号"></xf-input>
          </yd-cell-item>
          <yd-cell-item v-if="activityType === 1">
            <span slot="left" class="label required">邀请码：</span>
            <xf-input
              slot="right"
              :valid="[{required: true, msg: '请填写邀请码'}]"
              v-model.trim="form.password"
              ref="password"
              placeholder="请填写邀请码"></xf-input>
          </yd-cell-item>
        </yd-cell-group>
      </div>
    </div>
    <div class="submit" slot="footer">
      <mt-button size="large" type="primary" @click="onSubmit">提交</mt-button>
    </div>
    <transition name="router" mode="out-in">
      <router-view class="fixed-router"></router-view>
    </transition>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {validate} from '../../../common/js/util'
  import {mapGetters} from 'vuex'

  export default {
    components: {
      DefaultLayout,
      XfInput,
      HeaderBack},
    data() {
      return {
        form: {
          telphone: '',
          activityId: this.$route.query.id,
          password: ''
        },
        activityType: Number(this.$route.query.type),
        user: {}
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      onSubmit() {
        validate.bind(this)(this.form).then(() => {
          this.$post('/admin/person/sapi/party/activity/save/signUp', this.form, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.$router.replace({
              name: 'activitySuccess',
              query: {
                status: 1,
                title: encodeURIComponent('报名成功'),
                id: this.$route.query.id,
                busiType: 2
              }
            })
          })
        })
      },
      getUserInfo() {
        this.$post('/admin/person/sapi/party/activity/getUser/baseInfo', {}, loading => { this.$message.loading(loading) }).then(res => {
          this.user = res.data
          this.form.telphone = res.data.mobilePhone
        })
      }
    },
    created() {
      if (!this.$route.query.id || !this.$route.query.type) {
        this.$router.replace({name: 'home'})
        return
      }
      this.getUserInfo()
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .form{
    margin: .15rem 0 0 0;
  }
</style>
